<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>

<script language="javascript" type="text/javascript">
	function isNumberKey(evt){
		var charCode = evt
		alert("msj");
	}
</script>

</h:head>
<h:body>
<ui:composition template="/templates/Plantilla.xhtml">
 <ui:define name="content">
  <h:form id="form1">
  	 <h3> Alta de Personal</h3>
  	 <p:separator/> 
	 <p:panel>	
		<h:panelGrid columns="3">
			
			<h:outputText for="nombre" value="Nombre: *"/>
			<p:inputText id="nombre" value="#{personalCreate.personal.nombre}" autocomplete="off" 
					label="Nombre" required = "true"
				 	onkeyup="javascript:this.value=this.value.toUpperCase();">
			</p:inputText>
			<p:message for="nombre" />
			
			<h:outputLabel for="apellido" value="Apellido: *"/>
			<p:inputText id = "apellido" value="#{personalCreate.personal.apellido}"
				label = "Apellido" required = "true" 
				onkeyup="javascript:this.value=this.value.toUpperCase();">					  
			</p:inputText>
			<p:message for ="apellido"/>
			
			<h:outputLabel for="legajo" value="Nro de Legajo: *"/>
			<p:inputText id="legajo" value="#{personalCreate.personal.numeroDeLegajo}" 
				label="Legajo" required ="true">  
			</p:inputText>
			<p:message for="legajo"/>
			
			<h:outputLabel for="dni" value="DNI: *"/>
			<h:panelGroup>
				<p:inputText id="dni" value="#{personalCreate.personal.dni}" 
					label="DNI" required = "true" autocomplete="off"
					onkeyup = "isNumberKey(this.value);">
					<p:ajax update="cuil" event="keyup"/>
				</p:inputText>
			</h:panelGroup>
			<p:message for="dni" ></p:message>
			
			<h:outputLabel for="cuil" value="Cuil: *"/>
			<h:panelGroup style="width:50%;">
				<p:inputText id="preCuil" value="#{personalCreate.preCuil}" required = "true" style="width:5%;"/>	
				<p:inputText id="cuil" value="#{personalCreate.personal.dni}" style="width:40%;"/>
				<p:inputText id="posCuil" value="#{personalCreate.postCuil}" required = "true" style="width:5%;"/>
			</h:panelGroup>
			<p:message for="cuil" ></p:message>
			
			<h:outputLabel for="fechaNacimiento" value="Fecha de Nacimiento: *"/>
			<p:calendar id="fechaNacimiento" value="#{personalCreate.personal.fechaNacimiento}" mode="popup" showOn="button"
				label="Fecha de Nacimiento" required = "true"/>
			<p:message for="fechaNacimiento" ></p:message>
			
			<h:outputLabel for="fechaIngreso" value="Fecha de Ingreso: *"/>		
			<p:calendar id="fechaIngreso" value="#{personalCreate.personal.fechaDeIngreso}" mode="popup" showOn="button"
				label = "Fecha de Ingreso" required = "true"/>
			<p:message for="fechaIngreso" ></p:message>
			
			<h:outputLabel for="categoria" value="Categoria: *"/>			
			<p:selectOneMenu id="categoria" value="#{personalCreate.personal.categoria}" label="Categorias" required = "true">
				<f:selectItems value="#{selectOneMany.getCategorias()}" />
			</p:selectOneMenu>
			<p:message for="categoria" ></p:message>

			<h:outputLabel for="usuario" value="Usuario: *"/>			
			<p:inputText id="usuario" value="#{personalCreate.personal.usuario}"	label="Usuario" required = "true"/>
			<p:message for="usuario" ></p:message>
		</h:panelGrid>
		
			
			<h:panelGrid columns="2" id="matchGrid">                     
	            <h:outputLabel for="pwd1" value="Ingrese la Contraseña: *" />  
	            <p:password id="pwd1" value="#{personalCreate.personal.password}" match="pwd2" label="Password 1" 
	            required="true" feedback="true" weakLabel="Debil" goodLabel="Buena" strongLabel="Fuerte"
	           promptLabel="Ingrese una Contraseña"/>  
	  
	            <h:outputLabel for="pwd2" value="Password 2: *" />  
	            <p:password id="pwd2" value="#{personalCreate.personal.password}" label="Password 2" required="true"/>  
	        </h:panelGrid>
	        
	        <h:panelGrid columns="2" > 
	        <h:outputText value="Rol: *"/>
			<p:selectOneMenu id="rol" value="#{personalCreate.rol.rolId}" required="true" effect="fade"  label="Rol">    
	            <f:selectItems value="#{selectOneMany.getAllRoles()}" var="rol" 
					itemLabel="#{rol.nombre}" 
					itemValue="#{rol.rolId}"></f:selectItems>
				<p:ajax update="errorRol" event="change" />  
	        </p:selectOneMenu>
	        <p:message for="rol"  id="errorRol" ></p:message>
	        </h:panelGrid>
	        

		
		
	</p:panel>
	<p:panel style="text-align: center">
			<p:commandButton value="Guardar" id="guardar" title="Guardar Personal" 
				action="#{personalCreate.guardarPersonal(personalCreate.personal)}" update="growl1" ajax = "false"
				icon="ui-icon-disk">	
			</p:commandButton>
			<p:commandButton value="Cancelar" action="#{personalCreate.cancelarAltaPersonal()}" ajax="false" immediate="true"
			icon="ui-icon-close"></p:commandButton>	
	</p:panel>
  </h:form>
 </ui:define>
</ui:composition>
</h:body>
</html>

